import React, { useRef, useEffect, useState, useCallback } from 'react';
import { Modal, StyleSheet, Text, ScrollView, View, Pressable, DeviceEventEmitter } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { useTranslation } from 'react-i18next';
import RNExitApp from 'react-native-exit-app';
import { displayName, companyName } from '!/app.json';
import { Storage, RecordKeys } from '~/store';
import { px2dp, scale } from '~/utils/px2dp';
import { navigate } from '~/router/navigation';

const AgreementModal = (ref: any) => {
    const modalizeRef = useRef<any>(null);
    const [animationType, setAnimationType] = useState('fadeInUp');
    const [visible, setVisible] = useState(false);
    const { t } = useTranslation();
    const getAgreement = useCallback(async () => {
        try {
            const agreementStatus = await Storage.getItem(RecordKeys.agreement);
            if (agreementStatus !== 'accepted') {
                setVisible(true);
                setAnimationType('fadeInUp');
            } else {
                setVisible(false);
            }
        } catch (error) {
            setVisible(true);
            setAnimationType('fadeInUp');
        }
    }, []);
    const agree = async () => {
        setVisible(false);
        await Storage.setItem(RecordKeys.agreement, 'accepted');
    };
    const disAgreen = async () => {
        setVisible(true); // 这里可以考虑直接退出APP或者不让继续操作
        await Storage.setItem(RecordKeys.agreement, 'pending');
        RNExitApp.exitApp();
    };

    const goPolicy = (type) => {
        navigate('PrivacyScreen', { type, currentPage: 'AgreementModal' });
        setVisible(false);
    };
    useEffect(() => {
        const lister = DeviceEventEmitter.addListener('AgreementModal', (res) => {
            getAgreement();
        });
        getAgreement();
        return () => {
            lister.remove();
        };
    }, []);

    return (
        <Modal
            visible={visible}
            animationType="fade"
            transparent={true}
            statusBarTranslucent={true}
            hardwareAccelerated={true}>
            <View style={styles.modalContainer}>
                <Animatable.View ref={modalizeRef} animation={animationType} duration={500} style={styles.container}>
                    <Text style={styles.title}>{t('AgreementModal.title')}</Text>
                    <ScrollView style={styles.contentStyle} showsVerticalScrollIndicator={false}>
                        <Text style={styles.t1}>
                            &emsp;{t('AgreementModal.t1')}
                            <Text style={[styles.t2, { color: '#242D56' }]} onPress={() => goPolicy('privacy')}>
                                {t('AgreementModal.t11')}
                            </Text>
                            <Text>{t('AgreementModal.t12')}</Text>
                        </Text>
                        <Text style={[styles.t1, styles.t2]}>{t('AgreementModal.t2')}：</Text>
                        <Text style={[styles.t1, styles.t2]}>{t('AgreementModal.t3')}</Text>
                        <Text style={[styles.t1, styles.t2]}>{t('AgreementModal.t4')}</Text>
                        <Text style={styles.t1}>
                            &emsp;{t('AgreementModal.t5')}
                            <Text style={styles.t2}>{companyName}</Text>
                            {t('AgreementModal.t6')}
                            <Text style={styles.t2}>{displayName}</Text>
                            {t('AgreementModal.t7')}
                        </Text>
                    </ScrollView>
                    <View style={styles.bottom}>
                        <Pressable style={[styles.button, styles.call_button]} onPress={disAgreen}>
                            <Text style={[styles.button_text, styles.call_user]}> {t('AgreementModal.t8')}</Text>
                        </Pressable>
                        <Pressable style={[styles.button, styles.agreen_button]} onPress={agree}>
                            <Text style={[styles.button_text]}> {t('AgreementModal.t9')}</Text>
                        </Pressable>
                    </View>
                </Animatable.View>
            </View>
        </Modal>
    );
};
export default AgreementModal;

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
    },
    around: {
        justifyContent: 'space-around',
    },
    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        width: '80%',
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(40),
        height: '60%',
    },
    title: {
        fontSize: scale(28),
        fontWeight: 'bold',
        color: '#191919',
        textAlign: 'center',
    },
    contentStyle: {
        flexGrow: 1,
        paddingBottom: '10%',
        marginTop: px2dp(32),
        marginBottom: px2dp(32),
    },
    t1: {
        fontSize: scale(28),
        lineHeight: px2dp(46),
        marginBottom: px2dp(12),
        color: '#a4a4a4',
    },
    t2: {
        color: '#000',
        fontWeight: 'bold',
    },
    bottom: {
        margin: px2dp(-24),
    },
    button: {
        height: px2dp(100),
        backgroundColor: '#242D56',
        justifyContent: 'center',
        alignItems: 'center',
    },
    button_text: {
        color: '#FFFFFF',
        fontSize: scale(30),
    },
    call_button: {
        borderWidth: px2dp(2),
        borderColor: '#eee',
        backgroundColor: '#fff',
    },
    call_user: {
        color: '##1777FF',
    },
    agreen_button: {
        borderBottomRightRadius: px2dp(40),
        borderBottomLeftRadius: px2dp(40),
    },
});
